/* 定义全局变量 */
:root {
    --primary-color: #2d3e50;
    --white: #ffffff;
    --shadow: rgba(0, 0, 0, 0.2);
}

/* 导航栏整体样式 */
.navbar {
    width: 100%;
    background-color: var(--primary-color); /* 导航栏背景色 */
    display: flex;
    justify-content: space-between; /* 左右分开布局 */
    align-items: center; /* 垂直居中 */
    padding: 15px 0; /* 上下内边距 */
    flex-wrap: wrap; /* 响应式支持换行 */
}

/* 左侧导航 */
.navbar .left {
    display: flex;
    gap: 15px; /* 左侧链接间距 */
}

/* 中间导航 */
.navbar .center {
    display: flex;
    gap: 15px; /* 中间链接间距 */
}

/* 右侧导航 */
.navbar .right {
    display: flex;
    gap: 15px; /* 右侧链接间距 */
    margin-left: auto; /* 推到右侧 */
}

/* 导航链接样式 */
.navbar a {
    color: var(--white); /* 链接文字颜色 */
    padding: 10px 20px; /* 内边距，扩大点击区域 */
    font-weight: bold; /* 加粗字体 */
    border-radius: 5px; /* 圆角样式 */
    transition: background-color 0.3s; /* 背景色过渡效果 */
    text-decoration: none; /* 去除下划线 */
}

/* 悬停效果 */
.navbar a:hover {
    background-color: #1a2a3b; /* 深色背景 */
}

/* 响应式设计：小屏幕优化 */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column; /* 导航栏垂直排列 */
        padding: 10px; /* 减少内边距 */
    }

    .navbar .left,
    .navbar .center,
    .navbar .right {
        justify-content: center; /* 每个部分居中对齐 */
        margin-bottom: 10px; /* 垂直间距 */
    }

    .navbar a {
        width: 100%; /* 链接占满一行 */
        text-align: center; /* 链接文字居中 */
        margin: 5px 0; /* 增加垂直间距 */
    }
}
